<template>
  <view class="container">
    <!-- 新增模块 -->
    <view class="add-coupon">
      <p class="title">新增优惠券</p>
      <view class="button" @click="goToVoucherAdd">+新增</view>
    </view>

    <!-- 选择模块 -->
    <view class="coupon-status">
      <view class="status-item" :class="{ selected: isActive('ongoing') }" @click="selectStatus('ongoing')">
        进行中
      </view>
      <view class="status-item" :class="{ selected: isActive('ended') }" @click="selectStatus('ended')">
        已结束
      </view>
    </view>

    <!-- 优惠券显示模块 -->
    <view class="coupon-list">
      <view class="coupon-item" :class="{ ongoing: isActive('ongoing'), ended: isActive('ended') }">
        <view class="coupon-details">
          <p class="condition">满288减</p>
          <p class="discount">15</p>
        </view>
        <view class="divider"></view> <!-- 白色分割线 -->
        <view class="coupon-info">
          <p>优惠券名称：新用户体验优惠券</p>
          <p>有效期：2020.3.18-2020.4.18</p>
          <p>每人限领一张</p>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const selectedStatus = ref('ongoing'); // 当前选中的优惠券状态

// 判断选中的状态
const isActive = (status) => selectedStatus.value === status;

// 选择状态
const selectStatus = (status) => {
  selectedStatus.value = status;
};

const goToVoucherAdd=()=>{
	uni.navigateTo({
		url: '/pages/work/voucher_management/voucher_add/voucher_add'
	})
}
</script>

<style>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

/* 新增优惠券 */
.add-coupon {
  display: flex;
  justify-content: center; /* 居中显示新增模块 */
  align-items: center;
  margin-bottom: 20px;
}

.add-coupon .title {
  color: #0D7AF7;
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

.add-coupon .button {
  background-color: #0D7AF7;
  color: white;
  padding: 6px 12px; /* 调整按钮大小 */
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

.add-coupon .button:hover {
  background-color: #007acc;
}

/* 选择模块 */
.coupon-status {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.status-item {
  padding: 10px 20px; /* 增加左右内边距 */
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
  color: white; /* 确保字体为白色 */
  background-color: #89B0EC; /* 未选中时背景色 */
}

.status-item.selected {
  background-color: #0D7AF7; /* 选中时背景色 */
}

/* 优惠券显示模块 */
.coupon-list {
  display: flex;
  flex-direction: column;
}
.coupon-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 确保右边部分左对齐 */
}

.coupon-item.ongoing {
  background-color: #0D7AF7;
}

.coupon-item.ended {
  background-color: #89B0EC;
}

.coupon-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左对齐 */
}

.condition {
  font-size: 14px; /* 缩小优惠券条件字体 */
  color: white; /* 设置优惠券条件字体颜色为白色 */
}

.discount {
  font-size: 28px; /* 放大优惠券数额字体 */
  font-weight: bold;
  color: white; /* 设置优惠券数额字体颜色为白色 */
}

.coupon-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 确保右边部分左对齐 */
  text-align: left; /* 左对齐 */
}

.coupon-info p {
  font-size: 12px; /* 缩小优惠券信息字体 */
  color: white; /* 设置优惠券信息字体颜色为白色 */
}

/* 分割线 */
.divider {
  width: 1px;
  height: 50px;
  background-color: white;
  margin: 0 10px; /* 分割线的左右间距 */
}
</style>
